import { ImageViewer } from "@/components/common/ImageViewer";

export function useShipperAdd() {
  const columns: TableColumnList = [
    {
      label: "商品名称",
      prop: "spmc",
      width: "180px",
      cellRenderer: ({ row }) => (
        <>
          <div class="flex items-center">
            <ImageViewer src={row.imageJson} radius="8px" />
            <div class="block ml-1 flex-1 truncate text-left">
              {row.goodsName}
            </div>
          </div>
        </>
      )
    },
    {
      label: "商品规格",
      prop: "spgg",
      minWidth: "120px"
    },
    {
      label: "商品单价",
      prop: "spdj",
      minWidth: "100px",
      cellRenderer: ({ row }) => (
        <el-input-number
          min={1}
          precision={2}
          controls-position="right"
          v-model={row.spdj}
          style="width: 100%"
        />
      )
    },
    {
      label: "商品数量",
      prop: "spsl",
      minWidth: "100px",
      cellRenderer: ({ row }) => (
        <el-input-number
          min={0}
          step={1}
          step-strictly
          controls-position="right"
          v-model={row.spsl}
          style="width: 100%"
        />
      )
    },
    {
      label: "小计",
      prop: "xj",
      minWidth: "100px",
      cellRenderer: ({ row }) => {
        return (
          <span class="text-[#F76847]">{row.xj ? "￥" + row.xj : "--"}</span>
        );
      }
    },
    {
      label: "分摊后单价",
      prop: "fthdj",
      minWidth: "100px"
    },
    {
      label: "分摊后总价",
      prop: "fthzj",
      minWidth: "100px"
    },
    {
      label: "操作",
      width: "55px",
      fixed: "right",
      slot: "operation"
    }
  ];

  return { columns };
}
